.headerContainer {
  height: 94px;
  box-sizing: border-box;
  position: relative;
  z-index: 333;
  background-image: url('images/bg1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: 14px;
  padding-top: 16px;

  .topContainer {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;

    .menu-left {
      padding-left: 20px;
      height: 100%;
      width: 32%;
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: flex-start;
    }

    .menu-right {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      height: 100%;
      padding-right: 5px;
    }

    .menu-list {
      font-family: Source Han Sans, sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 16px;
      letter-spacing: 0em;
      padding: 10px 6px;
      font-variation-settings: "opsz" auto;
      /* 文字色 */
      color: #c2e5ff;
      cursor: pointer;
      z-index: 0;
    }

    .menu-action-list {
      color: #fff;
      background: radial-gradient(
          49% 23% at 50% 76%,
          rgba(53, 207, 195, 0.536) 0%,
          rgba(53, 207, 195, 0) 100%
      );
      border-width: 0px 0px 2px 0px;
      border-style: solid;
      border-image: linear-gradient(
          270deg,
          rgba(53, 207, 195, 0) 0%,
          #35cfc3 52%,
          rgba(53, 207, 195, 0) 100%
      ) 0 0 2 0;
    }

    .top-center {
      // height: 82px;
      width: 36%;
      display: flex;
      // padding-top: 10px;
      // background-size: 100% 100%;
      justify-content: center;
      // align-items: center;
      flex-direction: row;

      span {
        margin-left: 10px;
        // font-family: Source Han Sans;
        font-family: YouSheBiaoTiHei, serif;
        font-size: 26px;
        font-weight: 900;
        line-height: normal;
        text-align: center;
        letter-spacing: 4px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        background: linear-gradient(180deg, #ffffff 0%, #a1deff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        z-index: 0;
      }
    }

    .top-right {
      width: 32%;
      height: 100%;
      display: flex;
      box-sizing: border-box;
      align-items: center;

      .top-right-manage {
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-items: center;
        margin-right: 24px;
        height: 100%;

        .manage-box {
          margin: 0 14px;
          display: flex;
          box-sizing: border-box;
          align-items: center;
          justify-items: center;
          cursor: pointer;

          span {
            margin-right: 8px;
          }
        }

        img {
          cursor: pointer;
        }
      }
    }
  }
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.ml-2 {
  margin-left: 10px;
}
